<template>
  <a-card :tab-list="tabList" title="数据动态" :bodyStyle="{padding:0}" :activeTabKey="params.orderby" @tabChange="tabChange">
    <a-list :data-source="data">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta>
            <template #title>
              <router-link :to="{name:'CoffeeDetail',params:{id:item.id}}" 
                target="_blank" class="font-size-lg font-weight-500">
                {{ item.title }}
              </router-link>
            </template>
            <template #avatar><a-avatar :src="staticURL+item.cover" shape="square" :size="48" /></template>
            <template #description>
              <a-space :size="6">
                    <a-tooltip title="发布者"><span class="hover"><user-outlined/> {{ item.user_info.username }}</span></a-tooltip>
                    <a-divider type="vertical"/>
                    <a-tooltip title="浏览数"><span class="hover"><eye-outlined/> {{ item.views }}</span></a-tooltip>
                    <a-divider type="vertical"/>
                    <a-tooltip title="点赞数"><span class="hover"><heart-outlined/> {{ item.likes }}</span></a-tooltip>
                    <a-divider type="vertical"/>
                    <a-tooltip title="发布时间"><span class="hover"><clock-circle-outlined/> {{ item.create_time }}</span></a-tooltip>
                  </a-space>
            </template>
          </a-list-item-meta>
          <template #actions>
            <router-link :to="{name:'CoffeeDetail',params:{id:item.id}}" 
                target="_blank">
                <a-button type="link"><file-search-outlined/>详情</a-button>
            </router-link>
          </template>
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>

<script lang="ts" setup>
import { getCoffeeList } from '@/server/modules/home';
import { onMounted, reactive, ref } from 'vue';
import {
  EyeOutlined,
  HeartOutlined,
  ClockCircleOutlined,
  FileSearchOutlined,
  UserOutlined} from '@ant-design/icons-vue';
import { staticURL } from '@/config';

const tabList = [
  {key:'id',tab:'最新'},
  {key:'recommend',tab:'推荐'},
  {key:'views',tab:'热门'},
  {key:'likes',tab:'点赞'}
]
const params = reactive({
  orderby:'id',
  status:0 as number
})
const data = ref<Coffee[]>([])
const getData = async () => {
  const res = await getCoffeeList(params)
  if(res.code === 200 && res.data){
   data.value = res.data.data
  }
  
}
const tabChange = (key:string) => {
  params.orderby = key
  getData()
}
onMounted(() => {
  getData()
})
</script>

<style scoped>

</style>